<template>
	<div class="cate-tab1 swiper">
		<ol class="swiper-wrapper">
			<!-- 计算属性的返回结果[重组的数组]，丢给循环操作 -->
			<li v-for="(list,index) in pages" :key="index" class="swiper-slide cate-tab1-item">
				<router-link to="/" v-for="item in list" :key="item.id">
					<img :src="item.imgURL" />
					<aside>
						<h3>{{item.title}}</h3>
						<label>{{item.msg}}</label>
						<p>￥{{item.price}}
							<em>{{item.oldprice}}</em>
						</p>
					</aside>
				</router-link>
			</li>
		</ol>
		<!-- 自定义选择器 -->
	</div>
</template>

<script>
//引入vue周期函数
import {onMounted} from 'vue';

//引入Swiper滑动插件
import Swiper from 'swiper';
export default {
	name:'Category1',
	props:['propcategort'],
	data(){
		return {
			tab1List : []
		}
	},
	watch:{
		propcategort(){
			this.tab1List = this.propcategort.tab1List;
		}
	},
	computed:{
		//程序将其当成是属性而不是函数，是个变量
		pages(){
			let arr = [];//空数组，目的是：重组一个二维数组
			let num = 4;//每页条数
			//将原数组遍历
			this.tab1List.forEach((item,index)=>{
				//i:每页的页码
				let i = Math.floor(index/num);
				//将计算的页码放入新数组内作为下标
				//判断该下标是否已存在
				if(!arr[i]) arr[i]=[];
				arr[i].push(item);
			});
			return arr;
		}
	},
	setup(){
		//实例挂载标签之后
		onMounted(()=>{
			new Swiper('.cate-tab1');
		})
	}
}
</script>

<style scoped>
a{
	text-decoration: none;
	color: black;
}
.cate-tab1{
	overflow: hidden;
	margin-top: 0.1rem;
}
.cate-tab1 ol{
	width: 100%;
}
.cate-tab1 ol li{
	float: left;
	width: 100%;
	height: 100%;
}
.cate-tab1 ol li a{
	display: block;
	width: 45%;
	margin: 0.1rem 0;
	float: left;
}
.cate-tab1 ol li a:nth-child(even){
	float: right;
}
.cate-tab1-item img{
	width: 100%;
	border-radius: 0.3rem;
}
.cate-tab1-item aside{
	
}
.cate-tab1-item aside h3{
	font-size: 0.35rem;
	line-height: 0.45rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
}
.cate-tab1-item aside label{
	line-height: 0.4rem;
	color: #969696;
	overflow: hidden;
	display: -webkit-box;/* 转换为盒子 */
	-webkit-line-clamp: 1;/* 跟高度有关 */
	-webkit-box-orient: vertical;/* 超出盒子外的文本用省略号代替 */
}
.cate-tab1-item aside p{
	color: #f1aa02;
	font-size: 0.35rem;
	font-weight: bold;
}
.cate-tab1-item aside p em{
	color: #9e9e9e;
	font-size: 0.25rem;
	text-decoration:line-through;
}
</style>
